<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生详情表(教师端)</title>
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../js/axios-0.18.0.js"></script>

    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 880px;
        }
    </style>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app" align="center">

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form ref="form" :model="woyaode" label-width="70px">
            <el-form-item label="当前学科">
                <el-input v-model="woyaode.subject_name" disabled = "disabled"></el-input>
            </el-form-item>
            <el-form-item label="学科总分">
                <el-input v-model="woyaode.subject_total_points"></el-input>
            </el-form-item>
            <el-form-item label="学生得分">
                <el-input v-model="woyaode.stu_score"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="warning" @click="dialogVisible = false">取消</el-button>
                <el-button size="mini" type="danger" @click="onSubmit">立即更新</el-button>
            </el-form-item>
        </el-form>
        </span>
    </el-dialog>


    <!--上面是弹框-->

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span style="color:#37B328" style="size: A5 ">学 生 成 绩 详 情</span>
        </div>
        <div v-for="o in 1" :key="o" class="text item">
            <span>学生姓名:</span>
            <span>{{resu.stu_nikename}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>&nbsp;班级:</span>
            <span>{{resu.class_name}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>&nbsp;班主任:</span>
            <span>{{resu.tea_class}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        align="center"
                        type="selection"
                        width="100">
                </el-table-column>
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="subject_name"
                        align="center"
                        label="当前学科"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="subject_total_points"
                        align="center"
                        label="学科总分"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="stu_score"
                        align="center"
                        label="学生得分">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope" align="center">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">修 改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </el-card>
</div>
<script>

    new Vue({
        el: "#app",
        data: {
            woyaode: {
                subject_total_points: 0, //当前科目的总分
                stu_score: 0, // 当前科目的得分
                subject_name: 0,  //学科名
            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
            },
            dialogVisible: false,      /*弹框*/
            resu: {
                stu_nikename: "0",
                class_name: "0",
                subjectName: "0",
                subjectScore: 80,
                subjectCode: 2,
                tea_class: '',

            },
            tableData: [{
                subject_total_points: 0, //当前科目的总分
                stu_score: 0, // 当前科目的得分
                subject_name: 0,  //学科名
            }],
            multipleSelection: [],
            name: '',
        },
        methods: {
            onSubmit() {
                console.log(this.woyaode);
                console.log('submit!');
                var subject_total_points = this.woyaode.subject_total_points;
                var stu_score = this.woyaode.stu_score;
                var subject_name = this.woyaode.subject_name;
                var stuUsername = this.name;
                var keys = {subject_total_points, stu_score, subject_name, stuUsername}
                axios.post("/tea/updateStuInfo", keys).then(resp => {
                    console.log(resp);
                    if (resp.data.code == 1) {
                        this.dialogVisible = false;
                        this.$notify({type: 'success', message: '更新成功！'});
                        this.StuInIto()
                    } else {
                        this.$notify({type: 'error', message: '你的网络有问题！'});
                    }
                })
            },
            /*------------------------------编辑和删除按钮的函数-------(拿到当前表格的元素  2)---------------------------*/
            handleDelete(row) {
                this.dialogVisible = true;
                this.woyaode = row;
                console.log(row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 != 1) {
                    return 'success-row';
                }
                return '';
            },
            StuInIto() {
                this.name = sessionStorage.getItem("studentKey");
                console.log(this.name);
                name = this.name;
                axios.post("/stu/teacherFindStudent", {name}).then(resp => {
                    console.log(resp);
                    if (resp.data.code == 1) {
                        this.resu.stu_nikename = resp.data.data.stu_nikename;
                        this.resu.class_name = resp.data.data.class_name;
                        this.resu.tea_class = resp.data.data.tea_class;  // 班主任
                        this.tableData = resp.data.data.stu_score;
                    } else {
                        this.$notify({type: 'error', message: '查询失败！'});
                    }
                })
            }
        },
        created() {
            this.StuInIto()
        }
    });
</script>
</body>
</html>